<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>treeview</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" href="http://www.chendd.cn/app/images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="../bootstrap.min.css" />
<link rel="stylesheet" href="dist/bootstrap-treeview.min.css" />
<script type="text/javascript" src="../jquery/jquery.min.js"></script>
<script type="text/javascript" src="../bootstrap.min.js"></script>
<script type="text/javascript" src="dist/bootstrap-treeview.min.js"></script>
</head>
<body>

<div class="btn-group">
    <button class="btn btn-outline-primary" onclick="collapseAll()"><i class="fa fa-chevron-down"></i>&nbsp;全部展开</button>
    <button class="btn btn-outline-primary" onclick="expandAll()"><i class="fa fa-chevron-right"></i>&nbsp;全部折叠</button>
    <button class="btn btn-outline-primary" onclick="checkAll()"><i class="fa fa-check-square-o fa-1"></i>&nbsp;全部选中</button>
    <button class="btn btn-outline-primary" onclick="uncheckAll()"><i class="fa  fa-square-o fa-1"></i>&nbsp;全部不选</button>
</div>
<div id="treeview-checkable"></div>

<script type="text/javascript">

function convertData(){
    var datas = [
        {"id":1,"name":"北京市","parentId":-1},
        {"id":2,"name":"海淀区","parentId":1},
        {"id":3,"name":"朝阳区","parentId":1},
        {"id":4,"name":"湖北省","parentId":-1},
        {"id":5,"name":"武汉市","parentId":4},
        {"id":6,"name":"襄阳市","parentId":4},
        {"id":7,"name":"襄城区","parentId":6},
        {"id":8,"name":"襄州区","parentId":6},
        {"id":9,"name":"樊城区","parentId":6},
        {"id":10,"name":"老河口市","parentId":6},
        {"id":11,"name":"谷城县","parentId":6},
        {"id":12,"name":"南漳县","parentId":6},
        {"id":13,"name":"枣阳市","parentId":6},
        {"id":14,"name":"保康县","parentId":6},
        {"id":15,"name":"宜城市","parentId":6}
    ];
    var treeviews = convertTreeview(datas);
    for (var i=0 , lens = treeviews.length ; i < lens ; i++){
        var treeview = treeviews[i];
        collectList(treeview , datas);
    }
    return treeviews;
}

function collectList(treeview , datas){
    var nodeId = treeview.nodeId;
    for (var i=0 , lens = datas.length ; i < lens ; i++) {
        var data = datas[i];
        var parentId = data.parentId;
        if(parentId != null && parentId === nodeId){
            if(treeview.nodes == null){
                treeview.nodes = [];
            }
            var childMenuTreeview = {"nodeId" : data.id , "text": data.name , state: null , nodes: null};
            treeview.nodes.push(childMenuTreeview);
            this.collectList(childMenuTreeview , datas);
        }
    }
}

function convertTreeview(datas){
    var data = [];
    for (var i=0 , lens = datas.length ; i < lens ; i++){
        var item = datas[i];
        if(item.parentId === -1){
            var treeview = {"nodeId": item.id , "text": item.name , state: null , "nodes": null};
            data.push(treeview);
        }
    }
    return data;
}
//---------------------------------------------------------
$(function () {
   $("#treeview-checkable").treeview({
       data: convertData(),
       showIcon: true,
       levels: 5,
       showCheckbox: true,
       uncheckedIcon: "fa fa-square-o",//未选中时图标
       checkedIcon: "fa fa-check-square-o",
       //selectedIcon: "fa fa-check-square-o",//选中某行时的图标
       //nodeIcon: "fa fa-hand-o-right",//节点默认增加图标
       collapseIcon: "fa fa-chevron-down", //展开时显示图标
       // selectedIcon: "fa fa-checked-square-o",
       expandIcon: "fa fa-chevron-right", //折叠时显示图标
       //backColor: "red",//背景色
       selectedColor: "rgb(0,0,0)",
       selectedBackColor: "rgb(245,245,245)",
       //emptyIcon: "fa fa-file-o",//叶子级别显示图标
       showTags: true,
       onNodeChecked: function (event, node) {
           checkAllParent(node);
       },
       onNodeUnchecked: function (event, node) {
           uncheckAllParent(node);
           uncheckAllSon(node);
       }

   });
});

//选中全部父节点
function checkAllParent(node) {
    $('#treeview-checkable').treeview('checkNode', node.nodeId, { silent: true });
    var parentNode = $('#treeview-checkable').treeview('getParent', node.nodeId);
    if (!("nodeId" in parentNode)) {
        return;
    } else {
        checkAllParent(parentNode);
    }
}
//取消全部父节点
function uncheckAllParent(node) {
    $('#treeview-checkable').treeview('uncheckNode', node.nodeId, { silent: true });
    var siblings = $('#treeview-checkable').treeview('getSiblings', node.nodeId);
    var parentNode = $('#treeview-checkable').treeview('getParent', node.nodeId);
    if (!("nodeId" in parentNode)) {
        return;
    }
    var isAllUnchecked = true;  //是否全部没选中
    for (var i in siblings) {
        if (siblings[i].state.checked) {
            isAllUnchecked = false;
            break;
        }
    }
    if (isAllUnchecked) {
        uncheckAllParent(parentNode);
    }
}

//级联选中所有子节点
function checkAllSon(node) {
    $('#treeview-checkable').treeview('checkNode', node.nodeId, { silent: true });
    if (node.nodes != null && node.nodes.length > 0) {
        for (var i in node.nodes) {
            checkAllSon(node.nodes[i]);
        }
    }
}
//级联取消所有子节点
function uncheckAllSon(node) {
    $('#treeview-checkable').treeview('uncheckNode', node.nodeId, { silent: true });
    if (node.nodes != null && node.nodes.length > 0) {
        for (var i in node.nodes) {
            uncheckAllSon(node.nodes[i]);
        }
    }
}

function expandAll() {
    $('#treeview-checkable').treeview('expandAll');
}

function collapseAll() {
    $('#treeview-checkable').treeview('collapseAll');
}

function checkAll() {
    $('#treeview-checkable').treeview('checkAll');
}

function uncheckAll() {
    $('#treeview-checkable').treeview('uncheckAll');
}

</script>

</body>
</html>